<template>
  <div>
    <el-form
      :inline="false"
      :model="processData"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="流程ID">
        <el-input
          style="width: 90%"
          v-model="processData.id"
          readonly
        ></el-input>
      </el-form-item>
      <el-form-item label="流程名称">
        <el-input
          style="width: 90%"
          v-model="processData.name"
          readonly
        ></el-input>
      </el-form-item>
      <!-- 动态参数 -->
      <el-form-item label="动态参数">
        <el-select
          clearable
          style="width: 90%"
          v-model="processData.dynaVarKey"
          @change="dynaKeyChange"
          filterable
        >
          <el-option
            v-for="item in dynaKeyList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { systemManage } from "@/api/index";
export default {
  name: "ProcessProperty",
  data() {
    return {
      dynaKeyList: [],
    };
  },
  props: {
    processData: {
      type: Object,
      required: true,
    },
    modeler: {
      type: Object,
      required: true,
    },
    element: {
      type: Object,
      required: true,
    },
  },

  mounted() {
    // 动态参数获取字典下拉项
    this.getDynaKeyList();
    this.toForm();
  },
  methods: {
    toForm() {
      this.modeler.get("modeling").updateProperties(this.element, {
        dynavarkey: this.processData.dynaVarKey,
      });
      this.$emit("dynaKeyChange", this.processData.dynaVarKey);
    },
    getDynaKeyList() {
      let data = {
        page: 1,
        size: 999,
      };
      systemManage.dictManageQuery(data).then((res) => {
        if (res.code == 200) {
          this.dynaKeyList = res.datas.rows;
        }
      });
    },
    // 修改动态参数
    dynaKeyChange(val) {
      console.log(val, "val");
      this.modeler
        .get("modeling")
        .updateProperties(this.element, { dynavarkey: val });
      this.$emit("dynaKeyChange", val);
    },
  },
};
</script>

<style scoped>
</style>
